import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import CCDSystem from './CCDSystem.js';

import PrismCode from './prism/PrismCode.js';
require('./prism/prism.js')
require('prismjs/themes/prism.css');

export default class PairPanel extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pairs : []
        }
    }

    componentDidMount() {
        console.log("PairPanelPairPanelPairPanel  ");
        console.log({CCDSystem});
        let me = this;
        let cloneType = me.props.location.query.cloneType;
        let taskId = me.props.location.query.taskId;
        fetch('http://localhost:8080/pair/detail', {
            method: 'POST',
            mode: 'cors',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
            body: JSON.stringify({cloneType:cloneType, taskId: taskId})
        })
        .then(res => res.json())
        .catch(error => console.error('Fetch Error:', error))
        .then(function (result) {
          me.setState({
              pairs:result.data
          })
        });
    }

/*
var Prism = require('prismjs');

// The code snippet you want to highlight, as a string
var code = "var data = 1;";

// Returns a highlighted HTML string
var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');
*/
	render(){
		return (
		<div class="page page-limited">
            <div class="code-components">
                <div id="code-search" class="code-search">
                    <Link to="/task"><button>首页</button></Link>
                    &nbsp;&nbsp;&nbsp;
                    <Link to="/task"><button>上一页</button></Link>
                </div>

                <div class="boxed-group boxed-group-inner spacer-top">
                    <div class="overview-main page-main">
                        <div class="overview-quality-gate">
                            <h3>克隆详情</h3>
                        </div>
                        {this.state.pairs.map((pair) => {
                            return (
                                <div class="flex-columns">
                                    <div class="flex-column flex-column-half about-page-group-boxes">
                                        <div class="boxed-group">
                                        <h2>source_path: {pair.sourcePath}</h2>
                                            <div class="boxed-group-inner">
                                                <PrismCode component="pre" className="language-java">
                                                    {pair.sourceCode}
                                                </PrismCode>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex-column flex-column-half about-page-group-boxes">
                                        <div class="boxed-group"><h2>target_path: {pair.targetPath}</h2>
                                            <div class="boxed-group-inner">
                                                <PrismCode component="pre" className="language-java">
                                                    {pair.targetCode}
                                                </PrismCode>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>
        </div>
		);
	}
}